<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="${pageContext.request.contextPath }/js/amcharts/amcharts.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath }/js/amcharts/serial.js" type="text/javascript"></script>
<script type="text/javascript">
var json=eval('('+'${chartJson}'+')');
var chartData="[";
for(var i=0;i<json.length;i++){
	chartData+="{'Datatime':'"+json[i].Datatime+"',";
	chartData+="'数值':"+json[i]["数值"];
	if(i==(json.length-1)){
	chartData+="}]";
	}else{
	chartData+="},";
	}
}
chartData = eval('('+chartData+')');
AmCharts.ready(function () {
    // SERIAL CHART
    chart = new AmCharts.AmSerialChart();
    chart.dataProvider = chartData;
    chart.pathToImages = "${pageContext.request.contextPath }/js/amcharts/images/";
    chart.marginLeft = 10;
    chart.categoryField = "Datatime";
    
     chart.addListener("dataUpdated", zoomChart);
    
    // AXES
    // category
    var categoryAxis = chart.categoryAxis;
     categoryAxis.dashLength = 3;
     categoryAxis.minorGridEnabled = true;
     categoryAxis.minorGridAlpha = 0.1;
     categoryAxis.color="#ffffff";
    // value
    var valueAxis = new AmCharts.ValueAxis();
    valueAxis.title = "";
    valueAxis.dashLength = 5;
    valueAxis.axisAlpha = 0;
    chart.addValueAxis(valueAxis);
    
    
    // GRAPHS
    // Italy graph
    var graph = new AmCharts.AmGraph();
    graph.title ="数值";
    graph.valueField = "数值";
    graph.balloonText ="数值:[[value]]";
    graph.bullet = "round";
    chart.addGraph(graph);
    
    // CURSOR
    var chartCursor = new AmCharts.ChartCursor();
    chartCursor.cursorPosition = "mouse";
    chartCursor.zoomable = false;
    chartCursor.cursorAlpha = 0;
    chart.addChartCursor(chartCursor);
    
     var chartScrollbar = new AmCharts.ChartScrollbar();
      chart.addChartScrollbar(chartScrollbar);
                 
    
    // LEGEND
    var legend = new AmCharts.AmLegend();
    legend.useGraphSettings = true;
    chart.addLegend(legend);
    
    // WRITE
    chart.write("chartdiv");
});

    function zoomChart() {
       chart.zoomToDates(new Date(1970,0), new Date(2013,0));
    }
</script>
<title>Insert title here</title>
</head>
<body>
<div id="chartdiv" style="width: 100%; height: 250px;background-image: url('')"></div>
</body>
</html>